<template>
 <div>
   <ul>
     <li v-for="(item,index) in dataSos" :key="index" class="useritem">
       <el-row :gutter="20">
         <el-col :span="22" @click.native="goDetail(item)">{{item.name}},今年{{item.age}}岁`</el-col>
         <el-col :span="2"><a class="el-icon-setting"></a></el-col>
       </el-row>
     </li>
   </ul>
   <el-button type="primary" @click="changePrice">改变price</el-button>
        {{price}}
        {{realprices}}
 </div>
</template>

<script>
 import {mapState,mapMutations,mapGetters} from 'vuex'
 export default {
   data () {
     return {
       dataSos:[
         {
           name:"小明",age:18,hot:["篮球","爬山"]
           },
           {
           name:"小双",age:13,hot:["做饭","唱歌"]
           },
           {
           name:"小李",age:38,hot:["游泳","滑雪"]
           },
       ]
     }
   },
   methods:{
     goDetail(row){
       this.$router.push({
         name:"userdetail",
         query:{name:row.name,age:row.age,hot:row.hot.join(",")}
       })
     },
     changePrice(){
       console.log(this.updatePrice)
       this.updatePrice(-100)
     },
     ...mapMutations({
      updatePrice:'updatePrice'
    })
   },
   created () {

   },
   computed: {
     ...mapGetters({
       "realprices":"realprices"
     }),
     ...mapState({
       price:"price"
     })
   },
   components: {

   }
 }
</script>

<style lang='less' scoped >

 .useritem{
   height:40px;
   line-height:40px;
   border-bottom:1px solid #ccc;
   &:hover{
     cursor: pointer;
     background: #cda;
   }
 }
</style>
